<template>
  <div class="cityList" ref="wrapper">
    <!-- <div>{{letterTxt}}</div> -->
    <!-- div包层结构 -->
    <div>
      <div class="area">
        <div class="title">当前城市</div>
        <div class="area-list">
          <ul class="area-list-content">
            <li class="borderColor">{{this.city}}</li>
          </ul>
        </div>
      </div>
      <div class="area">
        <div class="title">热门城市</div>
        <div class="area-list">
          <ul class="area-list-content">
            <li v-for="(item ,index) in hotCitiesList" :key="index" @click="handleCityClick(item.name)">{{item.name}}</li>
          </ul>
        </div>
      </div>
      <!-- 循环对象 -->
      <div 
        class="area" 
        v-for="(item ,key) in cityList" 
        :key="key"
        :ref="key"
        
      >
        <div class="title">{{key}}</div>
        <div class="area-list">
          <ul class="area-content">
            <li v-for="(innerItem ,index) in item" :key="index" @click="handleCityClick(innerItem.name)">{{innerItem.name}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import axios from "axios";
import {mapState ,mapMutations} from 'vuex'
export default {
  name: "cityList",
  props: ["letterTxt"],
  // 计算属性
  computed:{
    ...mapState(['city'])
  },
  //js语法
  mounted() {
    // this指向 全局使用
    // this.scroll = new BScroll(this.$refs.wrapper)
    this.scroll = new BScroll(this.$refs.wrapper, {
      scrollY: true,
      click:true
    });
  },
  data() {
    return {
      hotCitiesList: [],
      cityList: {}
    };
  },
  created() {
    this.getHotCityLIst();
  },
  methods: {
    getHotCityLIst() {
      axios.get("/api/city.json").then(res => {
        this.hotCitiesList = res.data.data.hotCities;
        this.cityList = res.data.data.cities;
      });
    },
    // 用Vuex改变store里面的城市的值
    handleCityClick(city){
      // this.$store.dispatch('changeCity',city) 
      // this.$store.commit('change',city) //也可以直接 触发 change(){} 事件
      this.change(city)
      this.$router.push('/')
    },
    ...mapMutations(['change'])    // this.$store.commit('change',city) //事件的代码优化
  },
  // 组件之间的联动用到监听事件
  // 监听letterTxt值的变化 并作为变量名定义
  watch: {
    letterTxt() {
      if(this.letterTxt){
        const element =this.$refs[this.letterTxt][0]
        this.scroll.scrollToElement(element)
      }
    }
  }
};
</script>
<style scoped>
.borderColor {
  border-color: #00bcd4 !important;
}
.cityList {
  overflow: hidden;
  /* overflow-y:scroll; */
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  bottom: 0;
}
.area .title {
  background: #f5f5f5;
  width: 100%;
  height: 25px;
  line-height: 25px;
  text-indent: 10px;
}
.area .area-list {
  padding: 5px 10px;
  background: #ffffff;
}
.area .area-list .area-list-content {
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex: 1;
  justify-content: left;
  align-items: center;
  flex-wrap: wrap;
}
.area .area-list .area-list-content li {
  border: 1px solid #eeeeee;
  width: 30%;
  height: 28px;
  line-height: 28px;
  margin: 4px;
}
.area .area-list .area-content li {
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #eeeeee;
}
.area .area-list .area-content li:nth-last-child(1) {
  border: none;
}
</style>